<template>
  <div class="process-bar align-center">
    <template v-if="curProcess >= 100">
      <slot name="done" />
    </template>
    <template v-else>
      <slot name="doing" />
      <div class="bar justify-between ml-10 flex-1">
        <div
          v-for="i in 10"
          :key="i"
          :class="i * 10 <= curProcess ? 'active' : ''"
          class="item flex-1"
        />
      </div>
    </template>
  </div>
</template>
<script>
  export default {
    props: {
      curProcess: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import '@/assets/css/mixin.module.scss';
  .process-bar {
    display: inline-flex;
    line-height: 26px;
    .bar {
      display: flex;
      width: 220px;
      padding: 3px;
      overflow: hidden;
      @include themeify {
        border: 1px solid themed("processBorderColor");
      }
    }

    .item {
      margin: 0 3px;
      width: 2px;
      height: 8px;

      &.active {
        @include themeify {
        background: themed("processColor");
      }
      }

    }
  }
</style>
